<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <title></title>
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <link href="../bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../bootstrap-select-1.13.14/dist/css/bootstrap-select.css">
    <link rel="stylesheet" href="../toastr/toastr.min.css">
    <title>日常消耗</title>
</head>

<body>

    <div class="row" id="tableToolBar">
        <button type="button" class="btn btn-info" id="addBtn">添加客户</button>
        <button type="button" class="btn btn-danger" id="deleteMoreBtn">批量删除</button>
    </div>
<!--删除模态框-->
            <div class="modal fade" id="myDeleteModal" tabindex="-1" role="dialog"
                 aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close"
                                    data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                客户信息</h4>
                        </div>
                        <div class="modal-body" id="deleteDialogMsg">

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default"
                                    data-dismiss="modal">关闭
                            </button>
                            <button type="button" class="btn btn-primary" id="deleteBtn">
                                删除
                            </button>
                        </div>
                    </div><!-- /.modal-content --></div>
            </div>
            <!--添加和编辑模态框-->
            <div class="modal fade" id="MyModalforAddandEdit" tabindex="-1" role="dialog"
                 aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabelTitle">
                                资产出入库
                            </h4>
                        </div>
                        <div class="modal-body" id="TipForAddandEdit">
                            <form id="ForAddandEditForm">
                                <div class="form-group">
                                    <label class="col-md-3 control-label hidden">客户编号</label>
                                    <div class="col-md-9 hidden">
                                        <input type="text" class="form-control" id="consume_id">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="consume_name">物品名称</label>
                                    <input type="text" class="form-control" id="consume_name" name="consume_name" placeholder="请输入物品价格">
                                </div>
                                <div class="form-group">
                                    <label for="consume_price">物品价格</label>
                                    <input type="text" class="form-control" id="consume_price" name="consume_price" placeholder="请输入物品数量">
                                </div>
                                <div class="form-group">
                                    <label for="consume_num">物品数量</label>
                                    <input type="text" class="form-control" id="consume_num" name="consume_num" placeholder="请输入物品消耗数量">
                                </div>
                                <div class="form-group">
                                    <label for="consume_usedperday">物品消耗数量</label>
                                    <input type="text" class="form-control" id="consume_usedperday" name="consume_usedperday" placeholder="请输入物品消耗数量">
                                </div>
                                <div class="form-group">
                                    <label for="consume_text">备注</label>
                                    <input type="text" class="form-control" id="consume_text" name="consume_text" placeholder="请输入物品消耗数量">
                                </div>
                                <div class="text-right">
                                    <span id="returnMessage" class="glyphicon"> </span>
                                    <button type="button" class="btn btn-default right" data-dismiss="modal">关闭</button>
                                    <button id="addorEditBtn" type="button" class="btn btn-primary">办理</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        <!--boostrop-table的样式表-->
        <table id="data-table"></table>

    <script src="../jquery/jquery-3.5.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../bootstrap-select-1.13.14/dist/js/bootstrap-select.js"></script>
    <script src="../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="../toastr/toastr.min.js"></script>
    <script>
        var consume_ids=[];
        $(document).ready(function () {
            initTable();
            function initTable() {
                //让bookstraptable销毁
                $("#data-table").bootstrapTable("destroy");
                $("#data-table").bootstrapTable({
                    url: "/consumer/selectAllConsume",
                    method: 'post', //请求方式（*）
                    toolbar: '#addBtn,#deleteMoreBtn',            //工具按钮用哪个容器
                    striped: true, //是否显示行间隔色
                    cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    pagination: true, //是否显示分页（*）
                    sortable: true, //是否启用排序
                    sortOrder: "asc", //排序方式
                    sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
                    pageNumber: 1, //初始化加载第一页，默认第一页,并记录
                    pageSize: 5, //每页的记录行数（*）
                    pageList: [10, 20, 50, 100], //可供选择的每页的行数（*）
                    search: true, //是否显示表格搜索,模糊查询
                    strictSearch: false,//精确查询
                    // silent : true,// 刷新事件必须设置
                    showColumns: true, //是否显示所有的列（选择显示的列）
                    showRefresh: true, //是否显示刷新按钮
                    minimumCountColumns: 2, //最少允许的列数
                    clickToSelect: true, //是否启用点击选中行
                    //height: 1000,                      //表格高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                    uniqueId: "id", //每一行的唯一标识，一般为主键列
                    showToggle: false, //是否显示详细视图和列表视图的切换按钮
                    cardView: false, //是否显示详细视图
                    detailView: false, //是否显示父子表
                    clickToSelect: true,    //是否启用点击选中行
                    // queryParams: queryParams,
                    columns: [

                        {
                            checkbox: true,

                        },
                        {
                            field: 'consume_id',//JSon数据中的相应的key
                            title: '资产编号',//表头信息
                            sortable: true,
                            align: 'center',
                            valign: 'middle',
                        },
                        {
                            field: 'consume_name',//JSon数据中的相应的key
                            title: '物品名称',//表头信息
                            sortable: true,
                            align: 'center',
                            valign: 'middle',
                        },
                        {
                            field: 'consume_price',
                            title: '物品价格',
                            sortable: true,
                            align: 'center',
                            valign: 'middle',

                        },
                        {
                            field: 'consume_num',
                            title: '物品数量',
                            sortable: true,
                            align: 'center',
                            valign: 'middle',
                        },
                        {
                            field: 'consume_unit',
                            title: '消耗数量',
                            align: 'center',
                            sortable: true,
                            valign: 'middle',
                        },
                        {
                            field: 'consume_usedperday',
                            title: '消耗数量',
                            align: 'center',
                            sortable: true,
                            valign: 'middle',
                        },
                        {
                            field: 'consume_text',
                            title: '消耗数量',

                            align: 'center',
                            sortable: true,
                            valign: 'middle',
                        },
                        {
                            title: '操作',
                            align: 'center',
                            valign: 'middle',
                            events: operateEvents,
                            formatter: function (value, row, index) {
                                return "<button class='btn btn-info updateGuest'><i class='fa fa-pencil-square-o' aria-hidden='true'></i> 编辑</button> <button class='btn btn-danger deleteGuest'> <i class='fa fa-trash' aria-hidden='true'></i> 删除</button>"
                                    ;
                            }
                        }
                    ],
                    onLoadSuccess: function (res) {
                        console.log(res);
                        //复选框的居中样式
                        $(".bs-checkbox").css({"text-align": 'center', "vertical-align": "middle"});
                    }, onLoadError: function (statusCode) {
                        return "加载失败了"
                    }, formatLoadingMessage: function () {
                        //正在加载
                        return "拼命加载中...";
                    }, formatNoMatches: function () {
                        //没有匹配的结果
                        return '无符合条件的记录';
                    }
                });
            }

            var form = $('#ForAddandEditForm');
            form.bootstrapValidator({
                message: '输入值不合法',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    consume_name: {
                        message: '物品名不合法',
                        validators: {
                            notEmpty: {
                                message: '物品不能为空'
                            },
                            stringLength: {
                                min: 2,
                                max: 30,
                                message: '请输入2到30个字符'
                            }
                        }
                    }
                    , consume_price: {
                        validators: {
                            notEmpty: {
                                message: ' 商品价格不能为空'
                            }
                        }
                    }, consume_num: {
                        validators: {
                            notEmpty: {
                                message: '商品数量不能为空'
                            },
                        }
                    }
                }
            });

            //添加或编辑模态框的确认按钮
            $("#addorEditBtn").click(function () {
                var consume_id=$("#consume_id").val();
                alert(consume_id);
                if(consume_id!=""){
                    $.ajax(  {
                        url:"/consumer/updateConsume",
                        datatype:"json",
                        type:"get",
                        data:{
                            consume_id: consume_id,
                            consume_name:$("#consume_name").val(),
                            consume_price:$("#consume_price").val(),
                            consume_num: $("#consume_num").val(),
                            consume_unit: $("#consume_unit").val(),
                            consume_usedperday: $("#consume_usedperday").val(),
                            consume_text: $("#consume_text").val(),
                        },
                        success:function (result) {
                            if(result.errorCode==0){
                                $("#MyModalforAddandEdit").modal("hide");
                                initTable();
                                toastr.success(result.status);
                            }
                        }
                    })
                }else{
                    $.ajax({
                        url:"/consumer/insertConsume",
                        datatype:"json",
                        type:"post",
                        data:{
                            //guest_id: $("#guest_id").val(),
                            consume_name: $("#consume_name").val(),
                            consume_price: $("#consume_price").val(),
                            consume_num: $("#consume_num").val(),
                            consume_unit: $("#consume_unit").val(),
                            consume_usedperday: $("#consume_usedperday").val(),
                            consume_text: $("#consume_text").val(),
                        },
                        success: function (rs) {
                            var errorCode = rs.errorCode;
                            if (errorCode == 0) {
                                //模态框成功后消失
                                $("#MyModalforAddandEdit").modal("hide");
                                //插入成功后刷新
                                initTable();
                                //刷新后出一个提示框
                                toastr.success(rs.status);
                            } else {
                                toastr.error(rs.status);
                                $("#MyModalforAddandEdit").modal("hide");
                            }
                        }
                    })
                }
            });
            //delete
            $("#deleteMoreBtn").click(function () {
                //点击每一行的复选框都会将选中的行添加到数组中
                var rows = $("#data-table").bootstrapTable("getSelections");
                for(var i=0;i<rows.length;i++){
                    consume_ids[i]=rows[i].consume_id;
                }
                alert("=========="+consume_ids[0]);
                $("#deleteDialogMsg").html("您确定要删除这"+rows.length+"间房间信息吗？");
                $("#myDeleteModal").modal("show");
            })

            $("#deleteBtn").click(function () {
                $.ajax({
                    url:"/consumer/deleteConsume",
                    datatype:"json",
                    type:"post",
                    data:{
                        consume_id:consume_ids
                    },
                    //序列化,能够传递数组给服务器
                    traditional: true,
                    success:function (result) {
                        var errorCode = result.errorCode;
                        if(errorCode==0){
                            $("#myDeleteModal").modal("hide");
                            initTable();
                            toastr.success(result.status);
                        }else if(errorCode==-1) {
                            $("#myDeleteModal").modal("hide");
                            toastr.error(result.status);
                        }
                    }
                })
            })


            //添加客户
            $("#addBtn").click(function () {
                $("#consume_id").val("");
                showModalforAddandEdit();
            });
            //退出模态框下次点开编辑 上次模态框内容清除
            $("#MyModalforAddandEdit").on('hidden.bs.modal', function () {
                clearModelData();
            });
            //清空模态框
            function clearModelData() {
                $("#consume_id").val("");
                $("#consume_name").val("");
                $("#consume_price").val("");
                $("#consume_num").val("");
                $("#consume_unit").val("");
                $("#consume_usedperday").val("");
                $("#consume_text").val("");
            }
        });

        window.operateEvents = {
            'click .updateGuest': function (e, value, row, index) {
                $("#consume_id").val(row.consume_id);
                $.ajax({
                    url: "/consumer/selectConsumeById",
                    type: "post",
                    dataType: "json",
                    data: {
                        consume_id: row.consume_id
                    },
                    success: function (res) {
                        console.log(res);
                        if (res.errorCode == 0) {
                            showModalforAddandEdit();
                            $("#consume_id").val(res.object.consume_id);
                            $("#consume_name").val(res.object.consume_name);
                            $("#consume_price").val(res.object.consume_price);
                            $("#consume_num").val(res.object.consume_num);
                            $("#consume_unit").val(res.object.consume_unit);
                            $("#consume_usedperday").val(res.object.consume_usedperday);
                            $("#consume_text").val(res.object.consume_text);
                        }
                    }
                });
            },

            //该点击事件需要将括号中的参数写全才可以显示出来
            'click .deleteGuest': function (e, value, row, index) {
                consume_id = row.consume_id;
                consume_ids[0] = row.consume_id;
                $("#deleteDialogMsg").html("确定要删除" + row.consume_id + "这条数据吗？");
                $("#myDeleteModal").modal("show");
            }
        };
        function showModalforAddandEdit() {
            var assets_id = $("#consume_id").val();
            if(assets_id!=""){
                $("#myModalLabelTitle").text("编辑资产");
                $("#addorEditBtn").text("编辑")
                $("#MyModalforAddandEdit").modal("show");
            }else{
                $("#myModalLabelTitle").text("添加资产");
                $("#addorEditBtn").text("添加")
                $("#MyModalforAddandEdit").modal("show");
            }
        }
    </script>

</body>
</html>